<template>
  <!-- style="font-family:kaiti" -->
    <div class="background"  >

<!-- 注册表单,一个对话框 -->
<el-dialog v-model="isRegister"   title="用户注册"   width="30%"  draggable=true>
    <el-form label-width="120px" v-model="registerForm">
        <el-form-item label="用户名">
            <el-input type="text"   v-model="registerForm.username"   >
              <template #prefix>
                <el-icon><Avatar /></el-icon>
              </template>
              
            </el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input  type="password" v-model="registerForm.password" >
              <template #prefix>
        <el-icon><Lock /></el-icon>
        </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="registerAdd" >提交</el-button>
            <el-button @click="closeRegister">取消</el-button>
        </el-form-item>
    </el-form>
</el-dialog>

<!-- 登陆框 -->
<div class="login-box">
<el-form
    label-width="100px"
    :model="loginFrom"
    style="max-width: 460px"
    :rules="Loginrules"
    ref="ruleFormRef"
  >
 <div style=" text-align: center;
      font-weight: bold;">人员招聘后台管理系统</div>
    <el-form-item label="用户名"  prop="username">
      <el-input v-model="loginFrom.username"  clearable  >
        <template #prefix>
                <el-icon><Avatar /></el-icon>
              </template>
        </el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">

      <el-input v-model="loginFrom.password"   show-password   clearable  type="password" >
        <template #prefix>
        <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="验证码"  prop="codeValue">
      <el-input v-model="loginFrom.codeValue"  style="width: 100px;"
                clearable  >
      </el-input>

      <img :src="codeImage" @click="getCode" style="transform: scale(0.9);"/>
    </el-form-item>

 <!-- <el-checkbox v-model="rememberMe.rememberMe"   >记住我</el-checkbox>  -->

 <!-- 跳转一个新页面 -->
 <el-link type="primary"  style="transform: translateX(330px)"  @click="resetPassword()">忘记密码</el-link>



 
<br>
<el-button type="success" @click="getLogin(ruleFormRef)" size="small"   class="my-button">登录</el-button>
    <!-- <el-button type="primary" @click="isRegister=true"   class="my-button">注册</el-button> -->
  </el-form>

  <!-- 按下enter键提交登录请求 -->
  <!-- <input @keyup.enter="getLogin(ruleFormRef)"> -->

</div>

    </div>
</template>

<script lang="ts" setup>
import { ref,onMounted,reactive, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import useTokenStore  from '@/stores/useToken'
import type { FormInstance } from 'element-plus'
import {  getCodeApi ,loginApi,registerApi} from '@/api/SysLogin';

// <!-- 按下enter键提交登录请求 -->
    const keyDownHandler = (event:any) => {
        if (event.key === 'Enter') {
            // 执行你想要的操作
            console.log('Enter键被按下了');
            getLogin(ruleFormRef.value)
        }
    }
    onMounted(() => {
        window.addEventListener('keydown', keyDownHandler);
    });
    onUnmounted(() => {
        window.removeEventListener('keydown', keyDownHandler);
    });


// 重置密码
const resetPassword=()=>{

router.push({
  name:'resetPassword',
  query:{
  type:"sys"
}})

}





const ruleFormRef =  ref<FormInstance>()

// const rememberMe=rememberMeStore()

const loginFrom=ref({
username:'',
password:'',
codeKey:'',
codeValue:''
// rememberMe:rememberMe.rememberMe
})

const Loginrules=reactive({

  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
  ],
  codeValue: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]

})

// const rememberMeLogin=async()=>{
// if(rememberMe.rememberMe){

// let data:any=await api.post('/user/rememberMe',loginFrom.value)
// if(data.code===200){
//   ElMessage.success('登录成功')
//   router.replace({name:'layout'})
// }else{
//   ElMessage.error('登录失败')
// }

// }
// }

// onMounted(async()=>{

//   rememberMeLogin()
// })

const registerForm=ref({
  username:'',
  password:''
})

const codeImage=ref('')

const isRegister=ref(false)

const tokenStore = useTokenStore();


const router = useRouter()


// 登录,提交阶段
const getLogin = async(formEl: FormInstance | undefined) => {
  if (!formEl)  return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      ElMessage('请输入完整信息')
      return;
    }
  })
  let data:any =await loginApi(loginFrom.value)
if(data.code===200){
  ElMessage('登录成功')
  console.log(data.data);
  tokenStore.token=data.data
  router.replace({name:'layout'})
}else{

  ElMessage('登录失败')
  ElMessage('失败原因：'+data.message)

}


}


const getCode=async()=>{
  
  let {data}:any=await getCodeApi()
  console.log(data);
  

  console.log("验证码的值为============>",data);
  loginFrom.value.codeKey=data.codeKey
  codeImage.value=data.codeValue
}

// 注册,提交阶段
const registerAdd=async()=>{

let data:any=await registerApi(registerForm.value)

if(data.code==200){
  ElMessage('注册成功')
  registerForm.value={
    username:'',
    password:''
  }
  isRegister.value=false
}else{

  ElMessage('注册失败')
  registerForm.value={
    username:'',
    password:''
  }
  isRegister.value=false
  }

}

const closeRegister=()=>{
  registerForm.value={
    username:'',
    password:''
  }
  isRegister.value=false
}



// 页面加载完成获取验证码

onMounted(()=>{

getCode()

})


</script>



<style lang="scss" scoped>
// 登录页面总样式
.background{
  background: url("@/assets/22.jpg");
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  position: fixed;
  background-size: 100% 100%;
  font-family:kaiti
}

.login-box{
  border:1px solid #dccfcf;
  width: 350px;
  margin:180px auto;
  padding: 20px 50px 20px 50px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color:rgba(255,255,255,0.7);//这里最后那个0.7就是为了防止背景表单颜色太浅
}


.my-button {
  margin-right: 100px;
  width: 400px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;




}


</style>